// import React from 'react'
// import { useLocation } from 'react-router-dom'
// import qs from 'qs';


// export default function Music() {
//   /* 
//     useLocation:可以获取当前的路由地址信息
//       - path：当前的路由地址
//       - search：查询字符串形式的路由传参


//       start:在编程式路由导航的位置传入state参数
//   */
//   const location = useLocation()
//   console.log(location);
//   const { user } = qs.parse(location.search.split('?')[1])
//   const musicList = location.state
//   // musicList 歌曲列表

//   return (
//     <div>
//       <p>用户名是{user} 编号是:{ }</p>
//       <ul>
//         {
//           musicList.map(item => {
//             return <li key={item.id}> {item.name} </li>
//           })
//         }
//       </ul>
//     </div>
//   )
// }



import React from 'react'
import { useLocation } from 'react-router-dom';
import qs from 'qs';

export default function Music() {
  /* 
    useLocation:可以获取当前的路由地址信息
      - path：当前的路由地址
      - search：查询字符串形式的路由传参(query传参)
      - state: 在编程式路由导航的位置传入state参数
      
  
  */
  const location = useLocation()
  console.log(location, "music.location");
  const { user } = qs.parse(location.search.split("?")[1])
  const musicList = location.state
  console.log(musicList);
  return (
    <div>
      <p>用户名是{user} 编号是:{ }</p>
      <ul>
        {
          musicList.map(item => {
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}

